<template>
  <!-- 音乐播放页面 -->
  <view class="play-music-page">
    <u-navbar
      :height="55"
      :title="audioTitle"
      :immersive="true"
      :border-bottom="false"
      :background="{ background: 'transparent' }"
    >
    </u-navbar>

    <!-- 背景图 -->
    <div class="bg-wrapper">
      <image
        v-if="true"
        class="image-bg"
        style="width: 100%; height: 100%"
        mode="aspectFill"
        :src="audioPageBg"
      >
      </image>
    </div>

    <!-- 播放内容区域 -->
    <view class="music-content">
      <view class="center-box" @tap.stop="onClickCenterBox">
        <!-- 旋转图片 -->
        <view class="pic-box" :style="{ display: showLrc ? 'none' : 'flex' }">
          <view class="pic-img-wrapper">
            <image
              :animation="animationData"
              class="pic-box-img"
              mode="aspectFill"
              :src="audioPageBg"
            >
            </image>
            <view class="circle-ani"></view>
            <view class="circle-ani ani2"></view>
          </view>
        </view>

        <!-- 歌词 -->
        <view
          style="width: 100%; height: 100%"
          :style="{ display: !showLrc ? 'none' : 'block' }"
          @tap.stop="onClickCenterBox"
        >
          <scroll-view
            ref="lrcView"
            class="lrc-scroll-view"
            style="width: 100%; height: 100%"
            scroll-y="true"
            :scroll-top="lrcScrollTop"
          >
            <!-- 歌词列表 -->
            <view class="lrc-wrapper" v-show="audioLrc.ms && audioLrc.ms.length > 0">
              <view
                v-for="(item, index) in audioLrc.ms"
                :class="{ 'lrc-active': index === showlrcIndex }"
                style="
                  margin-bottom: 30rpx;
                  font-size: 32rpx;
                  font-weight: bold;
                  text-align: center;
                "
              >
                {{ item.c }}
              </view>
            </view>

            <view v-show="!audioLrc.ms || audioLrc.ms.length <= 0"> 暂无歌词 </view>
          </scroll-view>
        </view>
      </view>

      <!-- 底部按钮区域 -->
      <view class="bot-buttons">
        <view class="top-bts">
          <view><u-icon name="heart" size="60" /></view>
          <view><u-icon name="download" size="60" /></view>
          <view @tap="openComment"><u-icon name="chat" size="60" /></view>
        </view>

        <!-- 进度条 -->
        <view class="process-bar-wrapper">
          <!-- 已播放 -->
          <view
            >{{ parseMinute(audioMeta.currentTime) }}:{{ parseSecond(audioMeta.currentTime) }}</view
          >

          <!-- 进度 -->
          <view class="process-line-box">
            <!-- 总长度， -->
            <view class="pro-line dura-line" />
            <view class="pro-line dot" />

            <!-- 缓存进度 -->
            <view class="pro-line buffed-line" :style="{ width: audioBuffedPerc + '%' }" />

            <!-- 已播放长度 -->
            <view class="pro-line play-line" :style="{ width: audioPlayPerc + '%' }" />
          </view>

          <!-- 总长度 -->
          <view>{{ parseMinute(audioMeta.duration) }}:{{ parseSecond(audioMeta.duration) }}</view>
        </view>

        <!-- 控制按钮 -->
        <view class="control-bts">
          <view style="margin: 0 20rpx"><u-icon name="rewind-left" size="100" /></view>
          <view @click="onClickPlayBt" style="margin: 0 20rpx">
            <u-icon :name="audioMeta.paused ? 'play-circle' : 'pause-circle'" size="100" />
          </view>
          <view style="margin: 0 20rpx"><u-icon name="rewind-right" size="100" /></view>
        </view>
      </view>
    </view>

    <!-- 评论区 -->
    <u-popup
      v-model="showComment"
      safe-area-inset-bottom
      closeable
      mode="bottom"
      border-radius="10"
      height="800rpx"
    >
      <sq-comments ref="comments" />
    </u-popup>
  </view>
</template>

<script>
  import { mapState, mapGetters } from 'vuex'

  export default {
    data() {
      return {
        option: {},
        //旋转动画
        animationData: {},
        animation: null,
        animationFnKey: null,
        //旋转圈数
        cycles: 0,
        //显示歌词控件
        showLrc: false,
        //歌词滚动控件
        lrcScrollTop: 0,
        //显示第几行歌词
        showlrcIndex: 0,
        //
        showComment: false,
      }
    },
    computed: {
      ...mapState(['audioId', 'audioTitle', 'picUrl', 'audioMeta']),
      ...mapGetters(['audioPageBg']),
    },
    watch: {
      audioMeta(newVal) {
        //节流
        if (!this.audioLrc.ms) {
          return
        }
        let ms = this.audioLrc.ms
        let { currentTime } = newVal

        let index = this.showlrcIndex
        for (let i = 0, len = ms.length; i < len; i++) {
          let item = ms[i]
          if (item.t >= currentTime) {
            index = i - 1
            break
          }
        }
        this.showlrcIndex = index
      },
    },
    onLoad(option) {
      this.option = option
    },
    onReady() {},
    beforeDestroy() {
      if (this.animationFnKey != null) {
        clearInterval(this.animationFnKey)
      }
    },
    mounted() {
      // let animation = uni.createAnimation({
      // 	duration: 20 * 1000,
      // 	timingFunction:'linear',

      // });
      // this.animation = animation;

      // this.animation.rotate(360).step();
      // this.animationData = this.animation.export();

      // this.animationFnKey = setInterval(()=>{
      // 	this.cycles ++;
      // 	this.animation.rotate(360 + (this.cycles*360)).step();
      // 	this.animationData = this.animation.export();
      // }, 20 * 1000);

      console.log('play music page mounted!')
      this.playMusicById(this.option.id)
    },
    created() {},
    methods: {
      /**
       * 点击播放按钮 暂停按钮
       */
      onClickPlayBt() {
        console.log(this.audioMeta.paused)
        console.log('...true 代表本来暂停了 开始播放了 反之 false是本来播放中 开始暂停了')
        if (this.audioMeta.paused) {
          console.log('doPlayAudio', ' ...代表本来暂停了 开始播放了')
          this.doPlayAudio()
        } else {
          console.log('doPauseAudio', ' ...代表本来播放中 开始暂停了')
          console.log(this.audioMeta.paused)
          console.log(
            '...this.$store.state中audioMeta.paused的状态-之前',
            this.$store.state.audioMeta
          )
          this.doPauseAudio()
          // bug fix.
          // this.$store.state.audioMeta.paused = true;
          // 要改变this.$store.state中audioMeta.paused的状态
          console.log(
            '...this.$store.state中audioMeta.paused的状态-之后',
            this.$store.state.audioMeta
          )
          // 是false 将其置成true 代表 暂停了
          this.audioMeta.paused = true
          console.log(
            '...this.$store.state中audioMeta.paused的状态-再之后',
            this.$store.state.audioMeta
          )
        }
      },
      /**
       * 点击中间区域，切换显示歌词
       */
      onClickCenterBox() {
        console.log('click center box')
        this.showLrc = !this.showLrc
      },
      /**
       * 打开评论
       */
      openComment() {
        this.showComment = true
        this.$nextTick(() => {
          this.$refs.comments.getList({ type: 0, id: this.option.id })
        })
      },
    },
  }
</script>

<style scoped>
  .play-music-page {
    position: absolute;
    top: 0;
    bottom: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    padding-top: 150rpx;
  }

  .bg-wrapper {
  }

  .image-bg {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.7;
    filter: blur(70px);
  }

  .music-content {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .center-box {
    height: 0;
    flex: 1;
  }

  .pic-box {
    position: relative;
    display: flex;
    width: 100%;
    border-radius: 50%;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
  }

  .pic-img-wrapper {
    position: relative;
    display: block;
    width: 450rpx;
    height: 450rpx;
    border-radius: 50%;
  }

  .pic-box-img {
    display: block;
    width: 450rpx;
    height: 450rpx;
    border: 10rpx solid rgba(83, 77, 93, 0.9);
    border-radius: 50%;
  }

  .pic-box .circle-ani {
    position: absolute;
    top: 0;
    left: 0;
    width: 470rpx;
    height: 470rpx;
    border: 3rpx solid rgba(75, 80, 116, 0.6);
    border-radius: 50%;
    transform: scale(1.1);
    box-sizing: border-box;
  }

  .pic-box .circle-ani.ani2 {
    border: 3rpx solid rgba(75, 80, 116, 0.3);
    transform: scale(1.3);
  }

  .top-bts {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    padding: 30rpx 80rpx;
  }

  .process-bar-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    padding: 10rpx 40rpx;
  }

  .process-bar-wrapper .process-line-box {
    position: relative;
    width: 0;
    height: 12rpx;
    margin: 0 20rpx;
    border-radius: 10rpx;
    flex: 1;
  }

  .process-bar-wrapper .process-line-box .pro-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 12rpx;
    border-radius: 10rpx;
  }

  /* 总长度 */
  .process-bar-wrapper .process-line-box .dura-line {
    width: 100%;
    height: 100%;
    background-color: #8d888b;
  }

  /* 缓存长度 */
  .process-bar-wrapper .process-line-box .buffed-line {
    background-color: #999;
  }

  /* 播放长度 */
  .process-bar-wrapper .process-line-box .play-line {
    background-color: #95a7dd;
  }

  /* 点 */
  .process-bar-wrapper .process-line-box .play-line::after {
    position: absolute;
    top: -4rpx;
    right: -4rpx;
    width: 20rpx;
    height: 20rpx;
    background-color: #fff;
    border-radius: 50%;
    content: '';
  }

  .control-bts {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 40rpx 20rpx;
  }

  /* 歌词激活样式 */
  .lrc-active {
    color: var(--primary-color);
  }
</style>
